1. code；要import這js檔案到頁面js中才會生效。

import React, {useState} from "react";
import Image from "next/image";

function ProtectecImage(){
    //用'useState'hook來管理密碼'password'和是否顯示完整圖片'shoeFullImage'的狀態
    const [password, setPassword]=useState('');
    const [showFullImage, setShowFullImage]=useState(false);
    const correctPassword='自定義密碼';
    //用來存正確的密碼，可自定義
    const handlePasswordChange=(e)=>{
        setPassword(e.target.value);
    }; //用於處理密碼輸入的變化
    //用於檢查輸入的密碼是否正確。如果正確將'showFullImage'設為'true'並顯示完整圖片；否則顯示警告消息
    const handleShowImage=()=>{
        if(password===correctPassword){
            setShowFullImage(true);
        }else{
            alert('Please tyr again.');
        }
    }; 
    return(
        <div>
            <h1>Image</h1>
            <input type="password"
                   placeholder="Enter password"
                   value={password}
                   onChange={handlePasswordChange}
            />
            <button onClick={handleShowImage}>Show Image</button>
            {!showFullImage&&(
                <Image src="自定義預覽圖"
                       alt="Preview"
                       width={300}
                       height={200}
                      />
                )}
            {showFullImage&&(
                <Image src="自定義完整圖"
                       alt="Full Image"
                       width={250}
                       height={250}
                />
            )}
        </div>
    );
}
export default ProtectecImage;

2.實作ps是12345
密碼輸入錯誤：


密碼輸入正確：